<script lang="ts" setup>
import { ref } from 'vue'
import wjcjrw from './tabs/wjcjrw.vue'
import wjcfrw from './tabs/wjcfrw.vue'
import ocrsbrw from './tabs/ocrsbrw.vue'
import wjzbrw from './tabs/wjzbrw.vue'
import wjdbrw from './tabs/wjdbrw.vue'

// 入参
const activeName = ref<string>('wjcjrw')
// ref
const wjcjrwRef = ref<InstanceType<typeof wjcjrw>>()
const wjcfrwRef = ref<InstanceType<typeof wjcfrw>>()
const ocrsbrwRef = ref<InstanceType<typeof ocrsbrw>>()
const wjzbrwRef = ref<InstanceType<typeof wjzbrw>>()
const wjdbrwRef = ref<InstanceType<typeof wjdbrw>>()

/*
 * 切换tab页
 */
const changeTabs = (val: string) => {
  switch (val) {
    case 'wjcjrw':
      wjcjrwRef.value?.changePageNum(1)
      break
    case 'wjcfrw':
      wjcfrwRef.value?.changePageNum(1)
      break
    case 'ocrsbrw':
      ocrsbrwRef.value?.changePageNum(1)
      break
    case 'wjzbrw':
      wjzbrwRef.value?.changePageNum(1)
      break
    case 'wjdbrw':
      wjdbrwRef.value?.changePageNum(1)
      break
    default:
      break
  }
}
</script>
<template>
  <div class="container">
    <el-tabs v-model="activeName" type="card" @tab-change="changeTabs">
      <el-tab-pane label="文件采集任务" name="wjcjrw" lazy>
        <wjcjrw ref="wjcjrwRef" />
      </el-tab-pane>
      <el-tab-pane label="文件拆分任务" name="wjcfrw" lazy>
        <wjcfrw ref="wjcfrwRef" />
      </el-tab-pane>
      <el-tab-pane label="OCR识别任务" name="ocrsbrw" lazy>
        <ocrsbrw ref="ocrsbrwRef" />
      </el-tab-pane>
      <el-tab-pane label="文件转版任务" name="wjzbrw" lazy>
        <wjzbrw ref="wjzbrwRef" />
      </el-tab-pane>
      <el-tab-pane label="文件对比任务" name="wjdbrw" lazy>
        <wjdbrw ref="wjdbrwRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>
